<template>
  <div class="head">
    <div class="head-left">
      <img src="../../assets/img/head.png"  alt="" />
      <span>宜路铃停巡检</span>
    </div>
    <div class="head-right">
      <!-- 新增 创建工单按钮 -->
      <van-button
        v-if="showCreateOrderButton"
        type="primary"
        size="small"
        class="button create-order-btn"
        @click="createOrder"
      >
        <van-icon name="plus" /> 创建工单
      </van-button>

      <div v-if="showIcon">
        <van-icon name="exchange" color="#1989fa" @click="showSheet" />
        <van-action-sheet
          v-model:show="show"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
          @select="getSheetValue"
          title="选择停车点"
          class="custom-action-sheet"
        />
      </div>

      <!-- 新增返回按钮 -->
      <van-button
        v-if="showBackButton"
        plain
        hairline
        class="back-btn"
        @click="$router.go(-1)"
      >
        <van-icon class="list-icon" name="revoke" />
      </van-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    showIcon: {
      type: Boolean,
      default: true // 默认显示图标
    },
    showBackButton: {
      type: Boolean,
      default: false // 默认不显示返回按钮
    },
    showCreateOrderButton: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      actions: []
    };
  },
  mounted() {
    // 获取停车场列表
    this.getParkingList();
  },
  methods: {
    createOrder() {
      this.$emit("createOrder");
    
    },
    // 获取停车场列表
    async getParkingList() {
      try {
        // /parking/bizParkingLots/pageList?column=createTime&order=desc&pageNo=1&pageSize=10&parkingType=10&_t=1744356094332
        const response = await this.baseService.get(
          "/parking/bizParkingLots/queryList?hasOrder=1&parkingType=20"
        );
        if (response.code == 200) {
          this.actions = response.result.map(parking => ({
            name: parking.parkingName,
            value: parking.id
          }));
        } else {
          this.$toast("获取停车场列表失败");
        }
      } catch (error) {
        this.$toast("登录失效，请重新登录...");
        // todo
        this.$router.push("/login");
        this.clearStorage();
      }
    },
    clearStorage() {
      localStorage.removeItem("token");
      localStorage.removeItem("account");
      localStorage.removeItem("password");
    },
    showSheet() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
    },
    getSheetValue(action) {
      this.$emit("parking-selected", action.value); // 传递停车场ID
      this.show = false;
    }
  }
};
</script>
<style lang="less" scoped>
.head {
  color: black;
  background-color: #cee7ff;
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .head-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    span {
      font-size: 14px;
      color: white;
      font-weight: 700;
    }
  }

  img {
    width: 40px;
    height: 40px;
  }

  .head-right {
    display: flex;
    align-items: center;
    gap: 10px; // 控制按钮与图标间距

    .back-btn {
      border: 0px solid #a5d3ff !important;
      padding: 0 15px;
      background-color: transparent;
      .list-icon {
        color: #333;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
.create-order-btn {
  background-color: #1989fa; // 维持蔚蓝色
  color: white;
  border-radius: 16px; // 小圆角适配小尺寸
  padding: 2px 10px; // 更紧凑的内边距
  font-size: 12px; // 缩小字体
  display: flex;
  align-items: center;

  .van-icon {
    margin-right: 3px;
    font-size: 14px; // 图标适当缩小
  }
}
</style>
